<template>
  <view class="container">
		<!-- 输入职位名称 -->
		<view class="input-section">
		  <text class="input-title">职位描述</text>
		  <text class="next" @click="handleNextStep">保存</text>
		  <text class="input-note">请勿填写QQ、微信、电话等联系方式及特殊符号、性别歧视词、违反劳动法相关内容，否则有可能导致您的账号封禁</text>
		   <!-- 多行文本框 -->
		        <textarea
		          class="textarea"
				  v-model="jobDescription"
				   @input="handleInput"
		          auto-height
				  maxlength="500"/>
				  <view class="textarea-prompt" v-if="showPrompt">
					  <text class="prompt">1.工作内容</text>
					  <text class="prompt">2.任务要求</text>
					  <text class="prompt">3.特别说明</text>
				  </view>
		</view>
		
		<!--标签 -->
    <view class="section">
      <text class="section-title">可选标题</text>
      <view class="tags">
        <view
          v-for="(tag, index) in tags"
          :key="index"
          class="tag"
          @click="addTagToDescription(tag)"
        >
          <text>{{ tag }}</text>
        </view>
      </view>
    </view>

		<text class="input-counter">{{ jobDescription.length }}/500</text>
		
  </view>
</template>

<script>
export default {
  data() {
    return {
		jobDescription: '', // 职位描述
		showPrompt: true, // 是否显示提示文本
		tags: [
		        "岗位职责",
		        "任职要求",
		        "官网福利",
		        "教育背景",
		      ], // 标签内容
		};
    },
  methods: {
	  // 监听输入事件
	      handleInput(event) {
	        // 如果文本框有内容，隐藏提示文本
	        this.showPrompt = this.jobDescription.trim().length === 0;
	      },
	// 点击标签时，将标签内容添加到文本框中
	    addTagToDescription(tag) {
	      if (this.jobDescription) {
	        this.jobDescription += `\n${tag}`; // 追加到文本框
	      } else {
	        this.jobDescription = tag; // 如果文本框为空，直接赋值
	      }
	    },
	
    // 处理下一步按钮点击
    handleNextStep() {
      if (!this.jobDescription) {
        uni.showToast({
          title: '请填写职位描述',
          icon: 'none',
        });
        return;
      }

     // 获取上一个页面实例
           const pages = getCurrentPages();
           const prevPage = pages[pages.length - 2]; // 上一个页面实例
     
           // 将选中的职位名称传递回上一个页面
           if (prevPage && prevPage.$vm) {
             prevPage.$vm.jobDescription = this.jobDescription; // 更新上一个页面的 jobTitle
           }
     
           // 返回上一个页面
           uni.navigateBack();
    },
  },
};
</script>

<style>
.container {
  padding: 20px;
}

.input-section {
  margin-bottom: 20px;
}

.input-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10px;
}


.input-counter {
  font-size: 12px;
  color: #999;
  display: block;
  text-align: right;
  margin-top: 5px;
}

.input-note {
  font-size: 12px;
  color: #999;
  display: block;
  margin-bottom: 20px;
}

.input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #fff;
  font-size: 14px;
  color: #666;
}

.textarea {
  width: 100%;
  font-size: 14px;
  color: #666;
  height: auto;
  font-size: 14px;
  min-height: 100px;
}

.textarea-prompt {
  position: absolute;
  top: 130px;
  left: 20px;
  pointer-events: none; /* 防止提示文本拦截点击事件 */
}

.prompt {
  font-size: 14px;
  color: #999;
  display: block;
}
.section {
  margin-bottom: 15px;
  position: relative;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #555;
  display: block;
  margin-bottom: 10px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tag {
  padding: 8px 12px;
  background-color: #e0e0e0;
  border-radius: 5px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}

.tag:hover {
  background-color: #d0d0d0;
}

.next {
  width: 40px;
  height: 28px;
  color: #2F318B; 
 font-size: 20px;
  font-style: normal;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>